<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui 动态加载数据</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-css/layui.css">
</head>
<body>
<div class="layui-container">
    <div class="layui-form-item">
        <label class="layui-form-label">客户来源：</label>
        <div class="layui-input-block">
            <select name="sourceSteamerId" id="sourceSteamerSelect" lay-verify="required">
                <!-- 动态生成的 option 会插入在这里 -->
            </select>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui-js/layui.js"></script>
<script>
    // 模拟后台 API 请求
    function listRoleByCodeApi(params) {
        return new Promise((resolve, reject) => {
            // 假设这里是你的 API 请求
            setTimeout(() => {
                // 假数据
                const data = [
                    { id: 1, name: '来源 A' },
                    { id: 2, name: '来源 B' },
                    { id: 3, name: '来源 C' },
                ];
                resolve({ data: data });
            }, 1000); // 模拟延迟
        });
    }

    let params = {};
    params.roleCode = "manager";

    // 调用后台 API 获取数据
    listRoleByCodeApi(params).then(res => {
        console.log(res.data); // 打印返回的数据

        // 获取 select 元素
        const selectElement = document.getElementById('sourceSteamerSelect');

        // 清空现有的选项
        selectElement.innerHTML = '';

        // 遍历 API 返回的数据，动态添加 option 元素
        res.data.forEach(item => {
            const option = document.createElement('option');
            option.value = item.id; // 假设 API 返回数据项包含 `id` 字段
            option.innerHTML = item.name; // 假设 API 返回数据项包含 `name` 字段
            selectElement.appendChild(option);
        });

        // 重新渲染 layui 表单
        layui.use('form', function() {
            var form = layui.form;
            form.render('select');
        });
    }).catch(err => {
        console.error('API 请求失败:', err);
    });
</script>
</body>
</html>
